<template>
    <view class="classification-wrapper">
        <gw-search-input @clickHandle="clickHandle" :disabled="true"/>
        <view class="class-content">
            <select-class @selectClass="selectClass" ref="selectSort"></select-class>
            <view class="book-class-content">
                <multi-layer-class v-if="type === 2" :idName="id"/>
                <layer-class v-if="type === 1" :idName="id"/>
                <sort-list v-if="type === 3" :sortId="id"/>
                <picture-title-books v-if="type === 4" :sortId="id"/>
                <layer-theme-role v-if="type === 5" :idName="id"/>
            </view>
        </view>
    </view>
</template>

<script>
    import selectClass from './selectClass'
    import multiLayerClass from './multi-layer-class'
    import layerClass from './layer-class'
    import layerThemeRole from './layer-theme-role'
    import sortList from './sort-list'
    import pictureTitleBooks from './picture-title-books'
    import gwSearchInput from '../components/gw-search-input'
    import {mapGetters} from 'vuex';
    export default {
        name: "index",
        data() {
            return {
                type: '',
                dataList: [],
                id: 'author'
            }
        },
        computed: {
            ...mapGetters(['shoppingNum'])
        },
        onShow(){
            if(this.shoppingNum){
                uni.setTabBarBadge({
                    index: 2,
                    text: `${this.shoppingNum}`
                });
            } else {
                uni.removeTabBarBadge({
                    index: 2
                })
            }
            this.$refs.selectSort && this.$refs.selectSort.showSort()

        },
        components: {
            selectClass, gwSearchInput, multiLayerClass, layerClass, sortList, pictureTitleBooks, layerThemeRole
        },
        methods: {
            clickHandle(){
                uni.navigateTo({
                    url: `../index/search/index?type=${this.id}`
                });
            },
            selectClass(item){
                this.type = item.type;
                this.id = item.id;
            },
        }
    }
</script>

<style scoped lang="scss">
    .classification-wrapper {
        width: 100%;
        height: 100%;
        .class-content{
            display: flex;
            width: 100%;
            height: calc(100% - 120rpx);
            /*margin-top: 120rpx;*/
            position: relative;
            top: 120rpx;
            .book-class-content{
                margin: 0 30rpx;
                width: calc(100% - 236rpx);
                margin-left: 206rpx;
                height: 100%;
            }
        }
    }
</style>
